<template>
    <el-form-item label="地域" prop="title">
        <el-radio-group v-model="createform.audience.district" size="small" @change="changeCity">
            <el-radio-button label="NONE" :disabled="createform.audience.district_type==false">不限</el-radio-button>
            <el-radio-button label="CITY">按省市</el-radio-button>
            <el-radio-button label="COUNTY" :disabled="createform.audience.district_type==false">按区县</el-radio-button>
        </el-radio-group>
        <el-form-item label="" v-if="createform.audience.district=='CITY'" key="CITY" :prop="`audience.cityVal`">
            <div class="cascader_box">
                <div class="flexbox flexbetween">
                    <div class="cascader_left">
                        <div class="cas_header flexbox flexcenter flexbetween">按省市 <el-checkbox v-model="createform.audience.isAllCity" @change="cityAllCheck">全选</el-checkbox>
                        </div>
                        <div class="cas_center over_box flexbox">
                            <el-cascader-panel ref="citys" v-model="createform.audience.cityVal" :options="cityOptions" :props="{multiple:true,label:'label',value:'value',}" @change="getCityVal"></el-cascader-panel>
                        </div>
                    </div>
                    <div class="cascader_right flexbox flexcolumn">
                        <div class="cas_header flexbox flexcenter flexbetween">
                            <span>已选</span>
                            <el-link type="primary" :underline="false" @click="clearCitySNode('citys')">清空</el-link>
                        </div>
                        <div class="has_ckecked_box over_box">
                            <div class="has_checked_item flexbox flexcenter flexbetween" v-for="(item,index) in createform.audience.cityHasCheck" :key="index">
                                <span class="has_checked_text">{{item.label}}</span>
                                <el-link class="has_checked_icon" icon='el-icon-close' :underline="false" @click="deletCity(item,index)"></el-link>
                            </div>
                        </div>
                    </div>
                </div>
                <el-radio-group @change="selectRegion" v-model="createform.audience.location_type" class="region_radio">
                    <el-radio label="CURRENT" :disabled="createform.audience.district_type==false">正在该地区的用户</el-radio>
                    <el-radio label="HOME" :disabled="createform.audience.district_type==false">居住在该地区的用户</el-radio>
                    <el-radio label="TRAVEL" :disabled="createform.audience.district_type==false">到该地区旅行的用户</el-radio>
                    <el-radio label="ALL">该地区内的所有用户</el-radio>
                </el-radio-group>
            </div>
        </el-form-item>
        <el-form-item label="" v-else-if="createform.audience.district=='COUNTY'" key="COUNTY" :prop="`audience.cityVal`">
            <div class="cascader_box">
                <div class="flexbox flexbetween">
                    <div class="cascader_left">
                        <div class="cas_header flexbox flexcenter flexbetween">按区县 <el-checkbox v-model="createform.audience.isAllCity" @change="cityAllCheck">全选</el-checkbox>
                        </div>
                        <div class="cas_center over_box flexbox">
                            <el-cascader-panel ref="citys" v-model="createform.audience.cityVal" :options="countyOptions" :props="{multiple:true,label:'label',value:'value',}" @change="getCityVal"></el-cascader-panel>
                        </div>
                    </div>
                    <div class="cascader_right flexbox flexcolumn">
                        <div class="cas_header flexbox flexcenter flexbetween">
                            <span>已选{{createform.audience.cityHasCheck.length}}</span>
                            <el-link type="primary" :underline="false" @click="clearCitySNode('citys')">清空</el-link>
                        </div>
                        <div class="has_ckecked_box over_box">
                            <div class="has_checked_item flexbox flexcenter flexbetween" v-for="(item,index) in createform.audience.cityHasCheck" :key="index">
                                <span class="has_checked_text">{{item.label}}</span>
                                <el-link class="has_checked_icon" icon='el-icon-close' :underline="false" @click="deletCity(item,index)"></el-link>
                            </div>
                        </div>
                    </div>
                </div>
                <el-radio-group v-model="createform.audience.location_type" @change="selectRegion" class="region_radio">
                    <el-radio label="CURRENT" :disabled="createform.audience.district_type==false">正在该地区的用户</el-radio>
                    <el-radio label="HOME" :disabled="createform.audience.district_type==false">居住在该地区的用户</el-radio>
                    <el-radio label="TRAVEL" :disabled="createform.audience.district_type==false">到该地区旅行的用户</el-radio>
                    <el-radio label="ALL">该地区内的所有用户</el-radio>
                </el-radio-group>
            </div>
        </el-form-item>
        <div style="margin-top:10px" class="flexbox flexcenter" v-if="createform.audience.location_type=='CURRENT'">
            <el-checkbox v-model="createform.audience.exclude_limited_region" :true-label="1" :false-label="0" @change="sessionSave">排除限运地区</el-checkbox>
            <span class="user_tips font_12 color_02">注意：如果同时勾选“智能放量-地域”，将探索含限运地区的目标人群</span>
        </div>
    </el-form-item>
</template>

<script>
export default {
    props:["createform","cityOptions","countyOptions"],
    name: "",
    data() {
        return {};
    },
    created() {},
    computed:{
        // 省市所有默认值
        cascaderCityData() {
            var model = [];
            function tree2arr(arr, str, level) {
                arr.forEach((it) => {
                    let newStr = str.length ? [...str, it.value] : [it.value];
                    if (it.children) {
                        tree2arr(it.children, newStr, level + 1);
                    } else {
                        model.push(newStr);
                    }
                });
            }
            tree2arr(this.cityOptions, [], 0);
            return model;
        },

        // 区县所有默认值
        cascaderCountyData() {
            var model = [];
            function tree2arr(arr, str, level) {
                arr.forEach((it) => {
                    let newStr = str.length ? [...str, it.value] : [it.value];
                    if (it.children) {
                        tree2arr(it.children, newStr, level + 1);
                    } else {
                        model.push(newStr);
                    }
                });
            }
            tree2arr(this.countyOptions, [], 0);
            return model;
        },
    },
    methods: {
        // 城市全选
        cityAllCheck(v) {
            if (this.createform.audience.district == "CITY") {
                this.createform.audience.cityVal = v
                    ? this.cascaderCityData
                    : [];
            } else if (this.createform.audience.district == "COUNTY") {
                this.createform.audience.cityVal = v
                    ? this.cascaderCountyData
                    : [];
            }
            this.$nextTick(() => {
                let childNodes = this.$refs.citys
                    .getCheckedNodes(true)
                    .map((it) => {
                        return it.value;
                    });
                this.createform.audience.cityAllValue = childNodes;
                let checkText = [];
                let CheckedNodes = this.$refs.citys.getCheckedNodes();
                CheckedNodes = CheckedNodes.filter(
                    (option) => !(option.parent && option.parent.checked)
                );
                for (let i in CheckedNodes) {
                    checkText.push({
                        label: CheckedNodes[i].label,
                        value: CheckedNodes[i].value,
                    });
                }
                this.createform.audience.cityHasCheck = checkText;
                this.sessionSave();
            });
            this.sessionSave();
        },

        // 城市选择
        getCityVal(v) {
            if (this.createform.audience.district == "CITY") {
                this.cascaderCityData.length == v.length
                    ? (this.createform.audience.isAllCity = true)
                    : (this.createform.audience.isAllCity = false);
            } else if (this.createform.audience.district == "COUNTY") {
                this.cascaderCountyData.length == v.length
                    ? (this.createform.audience.isAllCity = true)
                    : (this.createform.audience.isAllCity = false);
            }
            let checkText = [];
            let CheckedNodes = this.$refs.citys.getCheckedNodes();
            CheckedNodes = CheckedNodes.filter(
                (option) => !(option.parent && option.parent.checked)
            );
            for (let i in CheckedNodes) {
                checkText.push({
                    label: CheckedNodes[i].label,
                    value: CheckedNodes[i].value,
                });
            }
            this.createform.audience.cityHasCheck = checkText;
            let childNodes = this.$refs.citys
                .getCheckedNodes(true)
                .map((it) => {
                    return it.value;
                });
            this.createform.audience.cityAllValue = childNodes;
            this.sessionSave();
        },
        // 城市删除
        deletCity(item, index) {
            let a = this.createform.audience.cityVal.filter((it) => {
                if (!it.includes(item.value)) {
                    return it;
                }
            });
            this.createform.audience.cityVal = a;
            this.createform.audience.cityHasCheck.splice(index, 1);
            this.createform.audience.isAllCity = false;
            this.$nextTick(() => {
                let childNodes = this.$refs.citys
                    .getCheckedNodes(true)
                    .map((it) => {
                        return it.value;
                    });
                this.createform.audience.cityAllValue = childNodes;
                this.sessionSave();
            });
            this.sessionSave();
        },
        // 清空已选
        clearCitySNode(refs) {
            this.createform.audience.cityVal = [];
            this.createform.audience.cityHasCheck = [];
            this.createform.audience.cityAllValue = [];
            this.createform.audience.isAllCity = false;
            this.$refs[refs].clearCheckedNodes();
            this.sessionSave();
        },
        //地域切换
        changeCity() {
            this.createform.audience.location_type = "CURRENT";
            this.createform.audience.cityVal = [];
            this.createform.audience.cityHasCheck = [];
            this.createform.audience.cityAllValue = [];
            this.createform.audience.isAllCity = false;
            if(this.createform.audience.location_type!=='CURRENT'){
                this.createform.audience.exclude_limited_region = 0
            }
            this.sessionSave();
        },

        //地域区域切换
        selectRegion(){
            if(this.createform.audience.location_type!=='CURRENT'){
                this.createform.audience.exclude_limited_region = 0
            }
            this.sessionSave();
        },

        sessionSave(){
            this.$emit("sessionSave")
        }
    },
    components: {},
};
</script>


<style scoped>
</style>

